<template>
	<view>
		<view class="JXHeader">
			<wuc-tab :tab-list="tabList" :tabCur="TabCur" @change="tabChange" tab-class="text-center text-black bg-white"
			 select-class="text-blue text-xl" class="tabHeader"></wuc-tab>

			<view class="searchs">
				<img class="searchsImg" src="../../static/searchs.png" alt="" @click="tosearch">
				<img class="flgif" src="../../static/fl.gif" alt="" @click="go_FL">
			</view>

			<swiper :current="TabCur" class="swiper" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)"
			 indicator-active-color="rgba(255,255,255,0)" @change="swiperChange" :style="{height:scrollH*2 + 'upx'}">
				<swiper-item>
					<scroll-view scroll-y :style="{height:scrollH*2 + 'upx'}">

						<view class="annerSwiper">
							<view class="">
								<view class="">
									<view class="">
										<swiper class="swiper1" autoplay="true" interval="3000" duration="300" circular="true">
											<swiper-item class="swiper1Item" v-for="(item,index) in bannerData" :key="index">
												<img :src="item.img" alt="">
											</swiper-item>
										</swiper>
									</view>
								</view>
							</view>
						</view>

						<view class="rankBox" @click="goRank">
							<view class="goodRankH">
								优质榜单
							</view>
							<scroll-view class="scroll-view_H" scroll-x="true">
								<view class="scroll-view-item_H scroll-item_H">
									<view class="rankTitle">
										<image src="../../static/image_top_1@2x.png" mode="" class="rankTitleImg"></image>
										<view class="rankTitleT" v-if="rankData[0]">
											{{rankData[0].name}}
										</view>
									</view>
									<view class="rankList">
										<view class="rankBookItem" v-for="(item,index) in rankDataOne" :key="index">
											<image class="rankBookSortI" onerror="" :src="index==0?'../../static/sign_no.1@2x.png':(index==1?'../../static/sign_no.2@2x.png':'../../static/sign_no.3@2x.png')"
											 mode=""></image>
											<image class="rankBookI" :src="item.img" mode=""></image>
											<view class="rankBookInfo">
												<view class="rankBookName">{{item.name}}</view>
												<view class="rankBookDesc">{{item.desc}}</view>
												<view class="rankBookSize">
													<view class="rankBookSizeT1">{{(item.size/10000).toFixed(2)}}万字</view>
													<view class="rankBookSizeT2">{{item.my_read_num}}人观看</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="scroll-view-item_H scroll-item_H">
									<view class="rankTitle">
										<image src="../../static/image_top_2@2x.png" mode="" class="rankTitleImg"></image>
										<view class="rankTitleT1" v-if="rankData[0]">
											{{rankData[1].name}}
										</view>
									</view>
									<view class="rankList">
										<view class="rankBookItem" v-for="(item,index) in rankDataTwo">
											<image class="rankBookSortI" :src="index==0?'../../static/sign_no.1@2x.png':(index==1?'../../static/sign_no.2@2x.png':'../../static/sign_no.3@2x.png')"
											 mode=""></image>
											<image class="rankBookI" :src="item.img" mode=""></image>
											<view class="rankBookInfo">
												<view class="rankBookName">{{item.name}}</view>
												<view class="rankBookDesc">{{item.desc}}</view>
												<view class="rankBookSize">
													<view class="rankBookSizeT1">{{(item.size/10000).toFixed(2)}}万字</view>
													<view class="rankBookSizeT2">{{item.my_read_num}}人观看</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="scroll-view-item_H lookMore">
									<view class="lookMoreT1">查看更多</view>
									<view class="lookMoreT2">more</view>
								</view>
							</scroll-view>
						</view>

						<view class="lanMuBox">
							<view class="ordinaryBox">
								<view class="ordinaryType" v-for="(items,indexs) in ordinary_lanmu">
									<view v-for="(item,index) in items">
										<view class="lanmuType type1" v-if="index == 0">
											<view class="typeHeader">
												<view class="typeName">{{item.name}}</view>
												<view class="typeMore" @click="goLokMore(item.lanmu_id)">查看更多</view>
											</view>
											<view class="type1Book">
												<view class="type1BookItem" v-for="itm in item.book.slice(0,8)" @click="goBookDetail(itm.id)">
													<image class="type1Img" :src="itm.img" mode=""></image>
													<view class="type1BookName">{{itm.name}}</view>
													<view class="type1Author">{{itm.author}}</view>
												</view>
											</view>
										</view>
										<view class="lanmuType type1" v-if="index == 1">
											<view class="typeHeader">
												<view class="typeName">{{item.name}}</view>
												<view class="typeMore" @click="goLokMore(item.lanmu_id)">查看更多</view>
											</view>
											<view class="type1Book">
												<view class="type1BookItem" v-for="itm in item.book.slice(0,4)" @click="goBookDetail(itm.id)">
													<image class="type1Img" :src="itm.img" mode=""></image>
													<view class="type1BookName">{{itm.name}}</view>
													<view class="type1Author">{{itm.author}}</view>
												</view>
											</view>
										</view>
										<view class="lanmuType type2" v-if="index == 2">
											<view class="typeHeader">
												<view class="typeName">{{item.name}}</view>
												<view class="typeMore" @click="goLokMore(item.lanmu_id)">查看更多</view>
											</view>
											<view class="type2Book">
												<view class="type2BookItem" v-for="itm in item.book.slice(0,2)" @click="goBookDetail(itm.id)">
													<view class="type2BookItemCon">
														<image class="type2BookImg" :src="itm.img" mode=""></image>
														<view class="type2BookItemText">
															<view class="type2Bookname">{{itm.name}}</view>
															<view class="type2BookAuthor">{{itm.author}}</view>
															<view class="type2BookTip">{{itm.category_name}}</view>
														</view>
													</view>
													<view class="type2BookItemDesc">
														{{item.desc}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="lastLanmu lanmuType">
									<view class="typeHeader">
										<view class="typeName">{{ordinary_lastlanmu == "" ? "":ordinary_lastlanmu[0].name}}</view>
										<view class="typeMore" @click="goLokMore(ordinary_lastlanmu[0].lanmu_id)">查看更多</view>
									</view>
									<view class="type3BookItem" v-for="item in ordinary_lastlanmu == '' ? '':ordinary_lastlanmu[0].book.slice(0,3)"
									 @click="goBookDetail(item.id)">
										<image class="type3BookImg" :src="item.img" mode=""></image>
										<view class="type3BookItemCon">
											<view class="type3BookName">{{item.name}}</view>
											<view class="type3BookDesc">{{item.desc}}</view>
											<view class="type3BookInfo">
												<view class="type3BookAuthor">
													{{item.author}}
												</view>
												<view class="type2BookTip">
													{{item.category_name}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y :style="{height:scrollH*2 + 'upx'}">

						<view class="annerSwiper">
							<view class="">
								<view class="">
									<view class="">
										<swiper class="swiper1" autoplay="true" interval="3000" duration="300">
											<swiper-item class="swiper1Item" v-for="(item,index) in bannerData" :key="index">
												<img :src="item.img" alt="">
											</swiper-item>
										</swiper>
									</view>
								</view>
							</view>

						</view>
						<view class="rankBox" @click="goRank">
							<view class="goodRankH">
								优质榜单
							</view>
							<scroll-view class="scroll-view_H" scroll-x="true">
								<view class="scroll-view-item_H scroll-item_H">
									<view class="rankTitle">
										<image src="../../static/image_top_1@2x.png" mode="" class="rankTitleImg"></image>
										<view class="rankTitleT" v-if="rankData[0]">
											{{rankData[0].name}}
										</view>
									</view>
									<view class="rankList">
										<view class="rankBookItem" v-for="(item,index) in rankDataOne" :key="index">
											<image class="rankBookSortI" :src="index==0?'../../static/sign_no.1@2x.png':(index==1?'../../static/sign_no.2@2x.png':'../../static/sign_no.3@2x.png')"
											 mode=""></image>
											<image class="rankBookI" :src="item.img" mode=""></image>
											<view class="rankBookInfo">
												<view class="rankBookName">{{item.name}}</view>
												<view class="rankBookDesc">{{item.desc}}</view>
												<view class="rankBookSize">
													<view class="rankBookSizeT1">{{(item.size/10000).toFixed(2)}}万字</view>
													<view class="rankBookSizeT2">{{item.my_read_num}}人观看</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="scroll-view-item_H scroll-item_H">
									<view class="rankTitle">
										<image src="../../static/image_top_2@2x.png" mode="" class="rankTitleImg"></image>
										<view class="rankTitleT1" v-if="rankData[0]">
											{{rankData[1].name}}
										</view>
									</view>
									<view class="rankList">
										<view class="rankBookItem" v-for="(item,index) in rankDataTwo">
											<image class="rankBookSortI" :src="index==0?'../../static/sign_no.1@2x.png':(index==1?'../../static/sign_no.2@2x.png':'../../static/sign_no.3@2x.png')"
											 mode=""></image>
											<image class="rankBookI" :src="item.img" mode=""></image>
											<view class="rankBookInfo">
												<view class="rankBookName">{{item.name}}</view>
												<view class="rankBookDesc">{{item.desc}}</view>
												<view class="rankBookSize">
													<view class="rankBookSizeT1">{{(item.size/10000).toFixed(2)}}万字</view>
													<view class="rankBookSizeT2">{{item.my_read_num}}人观看</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="scroll-view-item_H lookMore">
									<view class="lookMoreT1">查看更多</view>
									<view class="lookMoreT2">more</view>
								</view>
							</scroll-view>
						</view>
						<view class="lanMuBox">
							<view class="ordinaryBox">
								<view class="ordinaryType" v-for="(items,indexs) in ordinary_lanmu">
									<view v-for="(item,index) in items">
										<view class="lanmuType type1" v-if="index == 0">
											<view class="typeHeader">
												<view class="typeName">{{item.name}}</view>
												<view class="typeMore" @click="goLokMore(item.lanmu_id)">查看更多</view>
											</view>
											<view class="type1Book">
												<view class="type1BookItem" v-for="itm in item.book.slice(0,8)" @click="goBookDetail(itm.id)">
													<image class="type1Img" :src="itm.img" mode=""></image>
													<view class="type1BookName">{{itm.name}}</view>
													<view class="type1Author">{{itm.author}}</view>
												</view>
											</view>
										</view>
										<view class="lanmuType type1" v-if="index == 1">
											<view class="typeHeader">
												<view class="typeName">{{item.name}}</view>
												<view class="typeMore" @click="goLokMore(item.lanmu_id)">查看更多</view>
											</view>
											<view class="type1Book">
												<view class="type1BookItem" v-for="itm in item.book.slice(0,4)" @click="goBookDetail(itm.id)">
													<image class="type1Img" :src="itm.img" mode=""></image>
													<view class="type1BookName">{{itm.name}}</view>
													<view class="type1Author">{{itm.author}}</view>
												</view>
											</view>
										</view>
										<view class="lanmuType type2" v-if="index == 2">
											<view class="typeHeader">
												<view class="typeName">{{item.name}}</view>
												<view class="typeMore" @click="goLokMore(item.lanmu_id)">查看更多</view>
											</view>
											<view class="type2Book">
												<view class="type2BookItem" v-for="itm in item.book.slice(0,2)" @click="goBookDetail(itm.id)">
													<view class="type2BookItemCon">
														<image class="type2BookImg" :src="itm.img" mode=""></image>
														<view class="type2BookItemText">
															<view class="type2Bookname">{{itm.name}}</view>
															<view class="type2BookAuthor">{{itm.author}}</view>
															<view class="type2BookTip">{{itm.category_name}}</view>
														</view>
													</view>
													<view class="type2BookItemDesc">
														{{item.desc}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="lastLanmu lanmuType">
									<view class="typeHeader">
										<view class="typeName">{{ordinary_lastlanmu == "" ? "":ordinary_lastlanmu[0].name}}</view>
										<view class="typeMore" @click="goLokMore(ordinary_lastlanmu[0].lanmu_id)">查看更多</view>
									</view>
									<view class="type3BookItem" v-for="item in ordinary_lastlanmu == '' ? '':ordinary_lastlanmu[0].book.slice(0,3)"
									 @click="goBookDetail(item.id)">
										<image class="type3BookImg" :src="item.img" mode=""></image>
										<view class="type3BookItemCon">
											<view class="type3BookName">{{item.name}}</view>
											<view class="type3BookDesc">{{item.desc}}</view>
											<view class="type3BookInfo">
												<view class="type3BookAuthor">
													{{item.author}}
												</view>
												<view class="type2BookTip">
													{{item.category_name}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>

		</view>
	</view>
</template>

<script>
	import key from '../../common/key.js';
	import utils from '../../common/utils.js';
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				scrollH: '',
				domH: '',
				bannerData: [],
				ordinary_lanmu: [],
				ordinary_lastlanmu: [],
				TabCur: 0,
				rankData: [],
				rankDataOne: [],
				rankDataTwo: [],
				tabList: [{
					name: '男生频道',
				}, {
					name: '女生频道'
				}],
			}
		},
		components: {
			WucTab
		},
		onReady() {
			let _that = this
			uni.getSystemInfo({
				success(res) {
					_that.phoneH = res.windowHeight
					let view = uni.createSelectorQuery().select('.tabHeader')
					let domView = uni.createSelectorQuery().select('.lanMuBox')
					domView.boundingClientRect(data => {
						_that.domH = data.height
					}).exec()
					view.boundingClientRect(data => {
						_that.navH = data.height
						_that.scrollH = _that.phoneH - _that.navH
					}).exec()
				}
			})
		},
		created() {
			uni.showLoading({
				title: '加载中'
			})
			this.getBannerData(2);
			this.getLanMu(2);
		},
		methods: {
			// 插件自带方法
			tabChange(index) {
				this.TabCur = index;
				let res = this.$store.state.is_request
				if (!res) {
					this.getBannerData(index + 1);
					this.getLanMu(index + 1);
					this.$store.commit("req");
				}
			},
			swiperChange(e) {
				let {
					current
				} = e.target;
				this.TabCur = current;


				let res = this.$store.state.is_request
				if (!res) {
					this.getBannerData(current + 1);
					this.getLanMu(current + 1);
					this.$store.commit("req");
				}
			},
			// 点击事件
			goBookDetail(book_id) {
				console.log(book_id)
				uni.navigateTo({
					url: '/pages/childPages/bookDetail/bookDetail?book_id=' + book_id
				})
			},
			goLokMore(lanmu_id) {
				uni.navigateTo({
					url: '/pages/childPages/bookList/bookList?lanmu_id=' + lanmu_id
				})
			},
			goRank() {
				uni.navigateTo({
					url: '/pages/childPages/rank/rank'
				})
			},
			tosearch() {
				uni.navigateTo({
					url: '/pages/childPages/search/search/search'
				})
			},
			go_FL() {
				uni.navigateTo({
					url: '/pages/FenLei/FenLei'
				})
			},
			// 请求
			getBannerData(sex) {

				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"sex": sex
				}

				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a2/banner`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"sex": sex,
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.status == 200) {
							console.log(res)
							this.bannerData = res.data.data
						}
					}
				});
			},


			getLanMu(sex) {
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"sex": sex
				}

				let sign = utils.sortObj(data)

				uni.request({
					url: `${key.URL}a2/column/index`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"sex": sex,
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							uni.hideLoading();
							let ordinaryData = res.data.data.lm
							let rankData = res.data.data.rank
							rankData.forEach((val, index, arr) => {
								let rankArr = arr[index].book
								rankArr.forEach((val, indexIn, arrIn) => {
									arrIn[indexIn].img = utils.imgMd5(arrIn[indexIn].img)
								})
								arr[index].book = rankArr
							})

							this.rankData = rankData

							this.rankDataOne = rankData[0].book.slice(0, 3)
							this.rankDataTwo = rankData[1].book.slice(0, 3)

							ordinaryData.forEach((val, index, arr) => {
								let bookArr = arr[index].book
								bookArr.forEach((val, indexIn, arrIn) => {
									arrIn[indexIn].img = utils.imgMd5(arrIn[indexIn].img)
								})
								arr[index].book = bookArr
							})

							let Ord = new Array();
							ordinaryData.forEach((val, index, arr) => {
								if (index % 3 == 0) {
									Ord[index / 3] = arr.slice(0, arr.length - 1).slice(index, index + 3)
								}
							});
							this.ordinary_lanmu = Ord
							this.ordinary_lastlanmu = ordinaryData.slice(ordinaryData.length - 1, ordinaryData.length)
							console.log(this.ordinary_lanmu);
						}
					}
				});
			},




		}
	}
</script>

<style scoped>
	.rankBox {
		width: 100%;
		height: 720upx;
		background: rgba(244, 244, 248, 1);
		margin-top: 30upx;
	}

	.scroll-view_H {
		width: 100%;
		white-space: nowrap;

	}

	.scroll-view-item_H {

		background: #fff;
		margin-right: 30upx;
		display: inline-block;
		margin-left: 30upx;
		vertical-align: top;
	}

	.scroll-item_H {
		width: 560upx;
		height: 560upx;
	}

	.lookMore {
		width: 180upx;
		height: 540upx;
		text-align: center;
	}

	.lookMoreT1 {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 152, 1);
		margin-bottom: 6upx;
		margin-top: 240upx;
	}

	.lookMoreT2 {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(180, 179, 194, 1);
	}

	.goodRankH {
		font-size: 36upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		padding: 40upx 30upx;
	}

	.rankTitle {
		display: flex;
		align-items: center;
		padding: 30upx 0;
	}

	.rankTitleImg {
		width: 60upx;
		height: 32upx;
		margin: 0 10upx 0 20upx;
	}

	.rankTitleT {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(255, 131, 104, 1);
	}

	.rankTitleT1 {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #FFA02E;
	}

	.rankBookInfo {
		flex-grow: 1;
	}

	.rankBookItem {
		display: flex;
		margin-bottom: 30upx;
	}

	.rankBookSortI {
		width: 36upx;
		height: 36upx;
		margin: 0 16upx;
	}

	.rankBookI {
		width: 92upx;
		height: 120upx;
		margin-right: 20upx;
		background: #B2BECB;
	}

	.rankBookName {
		width: 342upx;
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		margin-bottom: 8upx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.rankBookDesc {
		width: 342upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-bottom: 8upx;
	}

	.rankBookSize {
		display: flex;
		align-items: flex-end;
	}

	.rankBookSizeT1 {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(179, 179, 193, 1);
		margin-right: 24upx;
	}

	.rankBookSizeT2 {
		font-size: 20upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(255, 144, 43, 1);
		background: rgba(255, 249, 243, 1);
		border-radius: 4upx;
		border: 1px solid rgba(255, 144, 43, 1);
		padding: 0 10upx;
	}


	.JXHeader {
		width: 100%;
		height: 418upx;
	}

	.tabHeader {
		text-align: left;
		padding-left: 30upx;
		padding-top: 30upx;
		box-sizing: border-box;
	}

	.tabHeader>>>bg-white {
		font-size: 30upx;
	}

	.tabHeader>>>.wuc-tab-item {
		display: inline-block;
		margin-right: 30upx;
	}

	.tabHeader>>>.text-blue i {
		width: 40upx;
		height: 4upx;
		background: #4F50CE;
		display: block;
		margin: 8upx auto;
		border-radius: 30upx;
	}

	.annerSwiper {
		width: 100%;
		height: 230upx;
		padding: 0 30upx;
		box-sizing: border-box;

	}

	.swiper1 img {
		width: 690upx;
		height: 230upx;
	}

	.swiper1Item {
		height: 230upx;
	}

	.searchs {
		padding: 20upx 20upx;
		box-sizing: border-box;
	}

	.searchsImg {
		width: 600upx;
		height: 60upx;
	}

	.flgif {
		margin-left: 16upx;
		width: 90upx;
		height: 60upx;
	}

	/* 	.lanMuBox {
		padding-bottom: 30upx;
	} */




	.bookImg3 {
		width: 100upx;
		height: 134upx;
		background: #ccc;
		position: absolute;
		top: 30upx;
		left: 30upx;
		z-index: 10;
	}

	.bookImg3 image {
		width: 100upx;
		height: 134upx;
	}

	.bookImg4 {
		width: 80upx;
		height: 120upx;
		background: #ccc;
		position: absolute;
		top: 38upx;
		right: 30upx;
		z-index: 8;
	}

	.bookImg4 image {
		width: 80upx;
		height: 120upx;
	}

	.lanmuType {
		padding: 0 30upx;
		box-sizing: border-box;

	}

	.typeHeader {
		padding: 40upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.typeName {
		font-size: 36upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #4B4C5D;
	}

	.typeMore {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
	}

	.type1Book {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.type1BookItem {
		margin-bottom: 30upx;
	}

	.type1Img {
		width: 150upx;
		height: 200upx;
	}

	.type1BookName {
		font-size: 24upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(60, 60, 60, 1);
		width: 150upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-bottom: 8upx;
	}

	.type1Author {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		width: 150upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.type2Book {
		display: flex;
		justify-content: space-between;
	}

	.type2BookImg {
		width: 150upx;
		height: 200upx;
		margin-right: 20upx;
	}

	.type2BookItem {
		width: 310upx;
	}

	.type2BookItemCon {
		display: flex;
		margin-bottom: 14upx;
	}

	.type2BookItemDesc {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.type2Bookname {
		font-size: 34upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(60, 60, 60, 1);
		margin-bottom: 24upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}

	.type2BookTip {
		width: 90upx;
		height: 32upx;
		background: rgba(255, 224, 207, 1);
		border-radius: 1px;
		border: 1px solid rgba(255, 156, 104, 1);
		font-size: 10px;
		font-family: PingFangSC-Light;
		font-weight: 300;
		color: rgba(255, 96, 14, 1);
		text-align: center;

	}

	.type2BookAuthor {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-bottom: 18upx;
	}

	.type3BookItem {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 40upx;
	}

	.type3BookItemCon {
		width: 70%;
	}

	.type3BookImg {
		width: 150upx;
		height: 200upx;
		margin-right: 30upx;
	}

	.type3BookName {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(60, 60, 60, 1);
		margin-bottom: 14upx;
	}

	.type3BookDesc {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 24upx;
	}

	.type3BookInfo {
		display: flex;
	}

	.type3BookAuthor {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-right: 16upx;
	}
</style>
